<template>
  <div class="home">

    <!-- 输入框 -->
    <div class="search-container">
      <div class="search-input padding-lr-20" @click="goSerachGoods">
        <SearchInput :disabled="true"></SearchInput>
      </div>
      <RouterLink :to="{ name: 'Address' }" custom v-slot="{ href, navigate }">
        <div class="city" @click="navigate" :href="href">
          <span class="city-name">{{ city }}</span>
          <van-icon class="arrow-down-icon" size="12" :name="getImageUrl2('images/address-drop-down.png')" />
        </div>
      </RouterLink>

    </div>

    <!-- 轮播图 和 分类 -->
    <div class="banner-category-container padding-lr-20">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.id">
          <img class="banner-img" :src="item.image_url" />
        </van-swipe-item>
      </van-swipe>
      <!-- 分类 -->
      <div>
        <ul class="category-container">
          <li v-for="item in channel" :key="item.id">
            <RouterLink :to="{name:'Goodslist',query:{id:item.id,name:item.name}}" custom v-slot="{ navigate, href }">
              <div @click="navigate" :href="href">
                <img class="category-icon" :src="item.icon_url" alt="">
                <span class="category-text"> {{ item.name }}</span>
              </div>
            </RouterLink>
          </li>
        </ul>
      </div>
    </div>

    <!-- 新品首发 -->
    <RouterLink to="/home/hotnew?flag=新品首发" custom v-slot="{ navigate, href }">
      <div @click="navigate" :href="href" class="padding-lr-20">
        <img class="img" :src="getImageUrl2('images/new-product-pic.png')" alt="">
      </div>
    </RouterLink>

    <!-- 热门推荐 -->
    <RouterLink to="/home/hotnew?flag=人气推荐" custom v-slot="{ navigate, href }">
      <div @click="navigate" :href="href" class="padding-lr-20">
        <img class="img" :src="getImageUrl2('images/hot-recom-pic.png')" alt="">
      </div>
    </RouterLink>

    <!-- 商品列表分类 -->
    <div class="goodlist-container padding-lr-20">
      <ul>
        <li class="category-item" v-for="(item, index) in newCategoryList" :key="item.id">
          <div :class='"item-title-" + `${index + 1}`'>
            <h2 class="title">{{ item.name }}好物</h2>
          </div>


          <ul class="sub-goods-container">
            <li class="sub-goods-item" v-for="(subItem, index) in item.goodsList">
              <div>
                <div class="img-container">
                  <img class="good-img" :src="subItem.list_pic_url" alt="">
                </div>
                <h3 class="goods-name">{{ subItem.name }}</h3>
                <div class="goods-price">￥{{ subItem.retail_price }}</div>
              </div>

            </li>
            <li class="next-container">
              <div class="next-img-container">
                <span class="next-text">{{ item.name }}好物</span>
                <img class="img" :src="getImageUrl2('images/next-home-icon.png')" alt="">

              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import SearchInput from '@/components/SearchInput.vue';
import { ref, onMounted, markRaw } from 'vue'
// 第一种方式：图片作为模块导入
// import homePic from '@/assets/icons/home-active.png'
// 第二种方式：new URL(url, import.meta.url)
import { getImageUrl, getImageUrl2, checkNullObj } from '@/utils/index.js'
// const demeUrl = ref('../../assets/icons/home-active.png')

import { index as indexApi } from '@/api/home/index.js'
import { useRouter } from 'vue-router'
import { useAddressStore } from '@/stores/address';
const router = useRouter()
const addressStore = useAddressStore()
const bannerList = ref([])
const brandList = ref([])
const channel = ref([
  {
    "id": 1005000,
    "name": "家居",
    "url": "/pages/category/category?id=1005000",
    "icon_url": getImageUrl2('images/jiaju-home-icon.png'),
    "sort_order": 1
  },
  {
    "id": 1005001,
    "name": "餐厨",
    "url": "/pages/category/category?id=1005001",
    "icon_url": getImageUrl2('images/canchu-home-icon.png'),
    "sort_order": 2
  },
  {
    "id": 1005002,
    "name": "服装",
    "url": "/pages/category/category?id=1005002",
    "icon_url": getImageUrl2('images/fuzhuang-home-icon.png'),
    "sort_order": 4
  },
  {
    "id": 1008000,
    "name": "旅行",
    "url": "/pages/category/category?id=1008000",
    "icon_url": getImageUrl2('images/lvxing-home-icon.png'),
    "sort_order": 3
  },
  {
    "id": 1019000,
    "name": "兴趣",
    "url": "/pages/category/category?id=1019000",
    "icon_url": getImageUrl2('images/xingqu-home-icon.png'),
    "sort_order": 5
  }
])
const hotGoodsList = ref([])
const newCategoryList = ref([])
const newGoods = ref([])
const topicList = ref([])
const city = ref('')

onMounted(async () => {
  const res = await indexApi()
  // console.log("res===>",res);
  bannerList.value = res.banner
  brandList.value = res.brandList
  hotGoodsList.value = res.hotGoodsList
  // res.newCategoryList.forEach(item=>{
  //   item.goodsList.push({
  //     icon:getImageUrl2('images/next-home-icon.png'),
  //     name:item.name
  //   })
  // })
  newCategoryList.value = res.newCategoryList
  newGoods.value = res.newGoods
  topicList.value = res.topicList

  // 获取城市信息

  //  console.log(" addressStore.getAddress===>", markRaw(addressStore.getAddress));

  if (!checkNullObj(addressStore.getAddress)) {
    city.value = addressStore.getAddress.name
  } else {
    searchLocation()
  }

})

// 获取城市信息
// 
const searchLocation = () => {
  AMap.plugin('AMap.CitySearch', function () {
    var citySearch = new AMap.CitySearch()
    citySearch.getLocalCity(function (status, result) {
      if (status === 'complete' && result.info === 'OK') {
        // 查询成功，result即为当前所在城市信息
        // console.log("result====>",result);
        city.value = result.city
      }
    })
  })
}

const goSerachGoods = () => {
  router.push({ name: 'Search' })
}
</script>
<style lang="scss" scoped>
@import '@/assets/common.scss';
$linearGradients: linear-gradient(135deg, #296aff 0%, #52c5ff 100%),
  linear-gradient(140deg, #fca334 0%, #fdd036 100%),
  linear-gradient(-41deg, rgba(33, 37, 27, 0.95) 0%, #4fcb11 100%),
  linear-gradient(-41deg, rgba(68, 240, 255, 0.95) 0%, #009ad0 100%),
  linear-gradient(90deg, #8b3af7 17%, #f16cff 83%),
  linear-gradient(90deg, #ff74a5 18%, #ffbfcd 83%),
  linear-gradient(144deg, #5c51eb 0%, #a097ff 100%),
  linear-gradient(-40deg, #ffc781 0%, #ff9650 100%),
  linear-gradient(-41deg, rgba(196, 222, 37, 0.95) 0%, #4ab216 100%);

.home {
  padding-bottom: 100px;
  box-sizing: border-box;

  // 搜索框容器
  .search-container {
    display: flex;
    margin-top: 8px;
    padding-bottom: 32px;
    background-color: #fff;

    .search-input {
      width: 539px;
    }

    .city {
      flex: 1;
      display: flex;
      align-items: center;
      padding-left: 46px;
      height: 70px;
      background-color: #fff;
      font-family: PingFangSC-Regular;
      font-size: 30px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 400;

      .city-name {
        display: block;
        width: 90px;
        @include textOverFlow;
      }

      .arrow-down-icon {
        margin-left: 15px;
      }
    }
  }

  // 轮播图
  .banner-category-container {
    background-color: #fff;
    padding: none;
    width: 750px;

    .banner-img {
      width: 710px;
      height: 343px;
    }

    // 首页分类
    .category-container {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0 78px;
      padding: 48px 24px;
      text-align: center;

      .category-icon {
        width: 69px;
        height: 69px;
      }

      .category-text {
        display: block;
        margin-top: 16px;
        font-size: 26px;
        color: #666666;
      }
    }
  }

  .img {
    width: 710px;
    height: 242px;
  }

  // 商品列表
  .goodlist-container {
    .category-item {
      .title {
        position: relative;

        text-align: center;
        padding: 61px 0 36px 0;

        font-size: 38px;
        color: #333333;
        font-weight: 600;
      }

      .title::after {
        content: '';
        position: absolute;
        top: 100px;
        left: 50%;
        z-index: -1;
        width: 81px;
        height: 13px;
        transform: translateX(-93%);
      }

      //  &:nth-child(1) .title::after{
      //     background-image: linear-gradient(135deg, #296AFF 0%, #52C5FF 100%);
      //   }
      //   &:nth-child(2) .title::after{
      //     background-image: linear-gradient(140deg, #FCA334 0%, #FDD036 100%);
      //   }

      // scss length() 函数，数组的长度
      // scss nth 函数，数组的长度
      // @for $i from 1 through length($linearGradients) {
      //   .category-item:nth-child(#{$i}) .title::after {
      //     background-image: nth($linearGradients , $i )
      //   }
      // }

      @for $i from 1 through length($linearGradients) {
        .item-title-#{$i} .title:after {
          background-image: nth($linearGradients, $i);
        }
      }


      .sub-goods-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 10px;

        .sub-goods-item {
          .img-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 350px;
            height: 350px;
            background-color: #fff;

            .good-img {
              width: 298px;
              height: 298px;
            }
          }

          .goods-name {
            @include textOverFlow;
            width: 350px;
            font-family: PingFangSC-Medium;
            font-size: 26px;
            color: #333333;
            letter-spacing: 0;
            font-weight: 500;
            padding: 17px 0 5px;

          }

          .goods-price {
            font-family: PingFangSC-Regular;
            font-size: 26px;
            color: #9E4242;
            letter-spacing: 0;
            font-weight: 400;
            padding-bottom: 44px;
          }
        }

        .next-container {

          width: 350px;
          height: 350px;
          background-color: #fff;

          .next-img-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .next-text {
              font-family: PingFangSC-Regular;
              font-size: 32px;
              color: #666666;
              letter-spacing: 0;
              font-weight: 400;
            }

            .img {
              margin-top: 21px;
              width: 58px;
              height: 58px;
            }
          }
        }
      }

    }
  }

}</style>